<template>

  <div id="asiderBar">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
      :router="true"
      active-text-color="#ffffff">
      <el-submenu index="1">
        <template slot="title"  v-show="menuLevel2_1.length>0">
          <i class="iconfont icon-mulu"></i>
          <span>成果填报</span>
        </template>
        <el-menu-item v-for="item in menuLevel2_1" :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="item.iconCls"></i>
            <span>{{item.name}}</span>
          </template>
        </el-menu-item>
<!--        <el-menu-item index="/instructions">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-shiliangtu"></i>-->
<!--            <span>数据填报说明</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/shiList">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-shiliangtu"></i>-->
<!--            <span>成果数据填报</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/wenList">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>成果清单</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/tuList">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-tuji"></i>-->
<!--            <span>图集成果</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/yanList">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-baogao"></i>-->
<!--            <span>研究报告</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-shuju"></i>
          <span>成果审核</span>
        </template>
        <el-menu-item v-for="item in menuLevel2_2" :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="item.iconCls"></i>
            <span>{{item.name}}</span>
          </template>
        </el-menu-item>
<!--                <el-menu-item index="/review">-->
<!--                  <template slot="title">-->
<!--                    <i class="iconfont icon-qingdan"></i>-->
<!--                    <el-badge :value="theTextAchievementsInfosTotal" class="item" type="primary">-->
<!--                      <span>待审核</span>-->
<!--                    </el-badge>-->

<!--                  </template>-->
<!--                </el-menu-item>-->

<!--                <el-menu-item index="/approved">-->
<!--                  <template slot="title">-->
<!--                    <i class="iconfont icon-qingdan"></i>-->
<!--                    <span>师级审核通过</span>-->
<!--                  </template>-->
<!--                </el-menu-item>-->
<!--                <el-menu-item index="/BTapproved">-->
<!--                  <template slot="title">-->
<!--                    <i class="iconfont icon-qingdan"></i>-->
<!--                    <span>兵团审核通过</span>-->
<!--                  </template>-->
<!--                </el-menu-item>-->
<!--        <el-menu-item index="2_1">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第一师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_2">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第二师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_3">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第三师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_4">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第四师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_5">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第五师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_6">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第六师</span>-->
<!--          </template>-->
<!--        </el-menu-item>  <el-menu-item index="2_7">-->
<!--        <template slot="title">-->
<!--          <i class="iconfont icon-qingdan"></i>-->
<!--          <span>第七师</span>-->
<!--        </template>-->
<!--      </el-menu-item>-->
<!--        <el-menu-item index="2_8">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第八师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_9">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第九师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_10">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第十师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_11">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第十一师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_12">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第十二师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_13">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第十三师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="2_14">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>第十四师</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
      </el-submenu>
    </el-menu>

  </div>

</template>
<script>
import {createNamespacedHelpers} from 'vuex'
const {mapGetters} = createNamespacedHelpers('dirmanage')
  export default {
    name: "AsideBar2",
    data() {
      return{
        isCollapse:false,
        requestParams:{
          pageNumber:1,
          pageSize:15,
          isApproved:2,
        },
        menuLevel2_1:[],
        menuLevel2_2:[]
      }
    },
    mounted() {
      this.$store.dispatch('dirmanage/getDivisionAchievementsVerifying',this.requestParams)
    },
    computed:{
     ...mapGetters(['theTextAchievementsInfosTotal'])
    },
    created(){
      var menuLevel2=JSON.parse(window.sessionStorage.getItem('menulevel2'))[1];
      for(let index in menuLevel2){
        if(menuLevel2[index].unit=='成果填报'){
          this.menuLevel2_1.push(menuLevel2[index])
        }else if(menuLevel2[index].unit=='成果审核'){
          this.menuLevel2_2.push(menuLevel2[index])
        }
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key){
        this.$store.commit('dirmanage/getCurrentLink',key)
      }
    }

  }
</script>

<style scoped>
  #asiderBar{
    position: absolute;
    width: 14%;
    /*height: 87%;*/
    top: 9.5%;
    bottom: 1.5%;
    left: 1%;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: auto;
    overflow-x: hidden;
    box-shadow: 0 0 5px #acc4fe;
  }
  ::v-deep.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
  /deep/.el-submenu__title {
    font-size: 18px;
    color: #4b4e53;
    font-weight: bold;
  }
  /deep/  .el-menu{
    width: 100%;
    border-radius: 8px;
  }
  /deep/ .el-menu-item.is-active {
    /*background: #ff8a6d !important;*/
    border-radius: 8px;

    /*margin-top:5px ;*/
    /*margin-bottom: 5px;*/
    /*margin-left: 15px;*/
    /*margin-right: 15px;*/
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3) !important;

  }
  /deep/ .el-collapse-item__header {
    font-size: 20px;
    padding-left: 20px;
  }
  .myp{
    margin-left: 50px;
  }
  /deep/ .el-button--text{
    color: #100f0f;
    font-size: 16px;
  }
  /deep/ .active{
    color: #409EFF;
  }
  ::-webkit-scrollbar
  {
    width: 10px;
  }
  /* 垂直滚动条的滑动块 */
  ::-webkit-scrollbar-thumb:vertical {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 6px rgba(84,92,100,.3);
    background-color:#eaedf1;
  }


  ::-webkit-scrollbar-thumb {
    border: 1px #808080 solid;
    border-radius: 10px;
    background: #999;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color:#eaedf1;
  }
  /*/deep/ .el-menu-item:hover{*/
  /*  background: #6db6ff !important;*/
  /*}*/
  /*/deep/ .el-submenu__title:hover {*/
  /*  background: #6db6ff !important;*/
  /*}*/
  /*/deep/.el-menu-item.is-active {*/
  /*  background: #6db6ff !important;*/
  /*}*/
  /*/deep/.el-submenu__title.is-active {*/
  /*  background: #6db6ff !important;*/
  /*}*/
  /deep/  .el-menu-item{
    color:#a5b1ad ;
    font-size: 16px;
    width: 80%;
    left: 10%;
  }
/deep/ .el-menu{
  top:2%;
  left:2%;
}
/deep/ .el-badge__content--primary {
    background-color: #35e7b6;
  }
/deep/ .el-badge__content.is-fixed {
  transform: translateY(-20%) translateX(150%);
}

</style>
